<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/cart.css">
    <script src="js/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script> -->

</head>

<body>
    <!-- header -->
    <div id="big-box">
        <div class="header">
            <div id="data-box">
                <div class="data-left">
                    <a>全部产品</a>
                    <a>专柜查询</a>
                </div>
                <div class="data-center">
                </div>
                <div class="data-right">
                    <ul>
                        <li class="help-center">帮助中心
                            <div class="help">
                                <div class="help-left">
                                    <h3>如何获得我们的帮助?</h3>
                                    <p>
                                        <a href="">常见问题</a>
                                    </p>
                                    <p>
                                        <a href="">使用条款</a>
                                    </p>
                                    <p>
                                        <a href="">隐私声明</a>
                                    </p>
                                    <p>
                                        <a href="">cookies政策</a>
                                    </p>
                                    <p>
                                        <a href="">知识产权和版权</a>
                                    </p>
                                    <p>
                                        <a href=""> 网站地图</a>
                                    </p>
                                </div>
                                <div class="help-right">
                                    <h3>联系我们</h3>
                                    <p>
                                        <a href="">在线客服：周一-周日早上9点-晚上24</a>
                                    </p>
                                    <p>
                                        <a href="">电话客服：周一-周五早上9点-下午18点 致电400-820-6499</a>
                                    </p>
                                    <a href="">
                                        <div class="help-button">在线咨询</div>
                                    </a>
                                </div>

                                0
                            </div>
                        </li>
                        <li>订阅电子杂志</li>
                        <li class="login"><a href="login.html">登录与注册
                    </a> </li>
                        <li class="data-right-buy"><a href="gouwuche.html">购物袋(0)</a></li>

                </div>
                </ul>
            </div>

            <!-- menu-bar -->
            <div class="menu-bar-box ">
                <div class="menu-bar ">
                    <div class="menu-bar-left "><img src="img/logo.03fce175.jpg " alt=" ">
                    </div>
                    <!-- center -->
                    <!-- 导航 -->
                    <div class="menu-bar-center ">
                        <ul class="menu-bar-center-ul">
                            <li class="menu-bar-center-li">明星产品 </li>
                            <li>会员尊享</li>
                            <li>彩妆</li>
                            <li>护肤</li>
                            <li>工具</li>
                            <li>品牌故事</li>
                        </ul>
                    </div>
                    <div class="menu-bar-right"><span>柔雾唇膏</span></div>
                </div>
            </div>

            <!-- menu-bar-bottom-img-box -->
            <div class="menu-bar-bottom-img-box ">
                <div class="menu-bar-bottom-img " style="background: url(img/0701-PC.jpg) center no-repeat; background-size:cover; "></div>
            </div>
        </div>
    </div>
    </div>
    <!--  main-->
    <main>
        <div class="cart-top">
            <div class="allcheckbox">
                <input type="checkbox" class="allcheck" onchange="allcheck()">
            </div>
            <div class="quanxuan">全选</div>
            <div class="chanpin">产品</div>
            <div class="shuliang">数量</div>
            <div class="jiage">价格</div>
        </div>
        <div class="cart-box">
            <!-- <div class="aaa"> -->
            <!-- <div class="cart-bottom">
                <div class="onecheckall">
                    <input type="checkbox" class="onecheck">
                </div>
                <div class="cart-img"><img src="img/clean01.jpg" alt=""></div>
                <div class="xiangqing">
                    <h3>名字</h3>
                    <h4>介绍</h4>
                    <button class="del">删除</button>
                </div>
              
                <div class="cartnumber"><input type="number"></div>
                <div class="cart-price">价格</div>
            </div> -->
            <!-- </div> -->
        </div>
        <div class="cart-footer"><span class="spans"></span></div>
    </main>
    <!-- footer  -->
    <div class="footer ">
        <!-- 官方正品保证 -->
        <div class="footer-row ">
            <div class="footer-row1 ">
                <img src="img/footer-row1.png " alt=" ">
                <p>100%官方正品保证</p>
            </div>
            <div class="footer-row1 ">
                <img src="img/footer-row2.png " alt=" ">
                <p>支持多种支付方式</p>
            </div>
            <div class="footer-row1 ">
                <img src="img/footer-row3.png " alt=" ">
                <p>专享官网特惠礼遇</p>
            </div>
            <div class="footer-row1 ">
                <img src="img/footer-row4.png " alt=" ">
                <p>联系我们</p>
                <p>电话400-820-6499</p>
            </div>
        </div>
    </div>
    <div class="copyright ">
        <div class="copyright-top ">
            <div class="copyright-top-content ">
                <h3>
                    <a href="product.html">护肤</a>
                </h3>
                <p>
                    <a href="product.html ">洁颜油</a>
                </p>
                <p>
                    <a href="product.html">面部喷雾</a>
                </p>
            </div>
            <!-- 2 -->
            <div class="copyright-top-content ">
                <h3>
                    <a href="product.html ">眼部</a>
                </h3>
                <p>
                    <a href="product.html"> 眉妆</a>
                </p>
                <p>
                    <a href="product.html">眼影</a>
                </p>
                <p>
                    <a href="product.html"> 眼线</a>
                </p>
            </div>
            <!-- 3 -->
            <div class="copyright-top-content ">
                <h3>
                    <a href="product.html">唇部</a>
                </h3>
                <p>
                    <a href="product.html"> 唇膏</a>
                </p>
                <p>
                    <a href="product.html"> 唇釉</a>
                </p>
            </div>
            <!-- 4 -->
            <div class="copyright-top-content ">
                <h3>
                    <a href="product.html">脸部
                       </a>
                </h3>
                <p>
                    <a href="product.html"> 粉底系列</a>
                </p>
                <p>
                    <a href="product.html">遮瑕系列</a>
                </p>
                <p>
                    <a href="product.html">隔离系列</a>
                </p>

            </div>
            <!-- 5 -->

            <div class="copyright-top-content ">
                <h3>
                    <a href="product.html">工具</a>
                </h3>
                <p>
                    <a href="product.html">粉底刷</a>
                </p>
                <p>
                    <a href="product.html">刷具套组</a>
                </p>
                <p>
                    <a href="product.html">睫毛夹</a>
                </p>
            </div>
            <!-- 6 -->
            <div class="copyright-top-content ">
                <h3>
                    <a href="product.html">护肤</a>
                </h3>
                <p>
                    <a href="product.html">洁颜油</a>
                </p>
                <p>
                    <a href="product.html">面部喷雾</a>
                </p>
            </div>

        </div>
        <div class="copyright-bottom ">
            <p>关注我们 国家药监局提示您：宣称用于祛斑美白、防晒、染发、烫发等的化妆品为特殊用途化妆品，产品标签上应标注“国妆特字”或者“国妆特进字”的标准文号。
            </p>
            <p>使用条款 | Cookies政策 | 隐私政策</p>
            <p>使用条款 | Cookies政策 | 隐私政策 中国工商沪ICP备08100043-7号沪公网安备 31010602001532号©L'Oreal China 欧莱雅（中国）有限公司版权所有</p>
        </div>
    </div>

    <script>
        loadCartList();
        //  购物车列表
        async function loadCartList() {
            let uid = localStorage.getItem("uid");
            let {
                data
            } = await axios.get('http://jx.xuzhixiang.top/ap/api/cart-list.php', {
                params: {
                    id: uid
                }
            });
            console.log(data);
            let resArr = data.data.map(
                (v) => `
                <div class="cart-bottom">
                <div class="onecheckall">
                    <input type="checkbox" class="onecheck" onchange="singelchange()">
                </div>
                <div class="cart-img"><img src="${v.pimg}" alt=""></div>
                <div class="xiangqing">
                    <h3>${v.pname}</h3>
                    <h4>${v.pdesc}</h4>
                    <button class="del" onclick="delfn(${v.pid})">删除</button>
                </div>
                <!-- 数量 -->
                <div class="cartnumber">
                    <button class="sub" onclick="subfn(${v.pid},this)">-</button>
                    <input type="text" value="${v.pnum}" class="zhi" readonly="readonly">
                    <button class="add" onclick="addfn(${v.pid},this)">+</button>
                    </div>
                <div class="cart-price data-price">${v.pprice}</div>
    
            </div>`
            );
            let listUl = document.querySelector(".cart-box");
            listUl.innerHTML = resArr.join("");



        }
        async function delfn(pid) {
            let uid = localStorage.getItem("uid");
            let token = localStorage.getItem("token");
            console.log(pid);
            let params = {
                uid,
                token,
                pid
            }
            let {
                data
            } = await axios.get('http://jx.xuzhixiang.top/ap/api/cart-delete.php', {
                params
            })
            console.log(data);
            loadCartList();
            totalPrice();

        }

        async function addfn(pid, btn) {
            let ipt = btn.previousElementSibling;
            ipt.value = parseInt(ipt.value) + 1

            // console.log(ipt);
            let uid = localStorage.getItem("uid");
            let pnum = ipt.value;
            let params = {
                uid,
                pnum,
                pid
            }
            let {
                data
            } = await axios.get('http://jx.xuzhixiang.top/ap/api/cart-update-num.php', {
                params
            })
            console.log(data);
            totalPrice();

        }

        async function subfn(pid, btn) {
            let ipt = btn.nextElementSibling;
            console.log(ipt);
            if (ipt.value == 1) {

            } else {
                ipt.value = parseInt(ipt.value) - 1
                let uid = localStorage.getItem("uid");
                let pnum = ipt.value;
                let params = {
                    uid,
                    pnum,
                    pid
                }
                let {
                    data
                } = await axios.get('http://jx.xuzhixiang.top/ap/api/cart-update-num.php', {
                    params
                })

                console.log(ipt.value);
                console.log(data);

            }
            // loadCartList();
            totalPrice();

        }

        function singelchange() {
            totalPrice();
            let singel = document.querySelectorAll('.onecheck');
            console.log(singel);
            let arr = [...singel];
            console.log(arr);
            let resArr = arr.every((v) => v.checked == true);
            let allcheck = document.querySelector('.allcheck');
            // console.log(allcheck);
            allcheck.checked = resArr;
        }

        function allcheck() {
            totalPrice();
            let allcheck = document.querySelector('.allcheck');
            let singel = document.querySelectorAll('.onecheck');
            singel.forEach((v) => v.checked = allcheck.checked);
        }
        // 计算价格
        function totalPrice() {
            let onecheck = document.querySelectorAll(".onecheck");
            // console.log(onecheck);
            let arr = [...onecheck];
            // console.log(arr); 
            let resArr = arr.filter((v) => v.checked == true);
            console.log(resArr);
            let num = 0;
            resArr.forEach(singel => {
                let div = singel.parentNode.parentNode;
                let pnum = div.querySelector(".zhi").value;
                let price = div.querySelector(".cart-price").innerHTML;
                count = pnum * price;
                num = num + count;
                console.log(num);
            })
            let span = document.querySelector(".spans");
            console.log(span);
            span.innerHTML = "￥" + num;
        }
    </script>
</body>

</html>